<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单支付</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../../css/my/order/payment.css">
    <link rel="stylesheet" type="text/css" href="../../../css/common/credit.css">
    <style>
      #payment{
        background-color: #3CB0D6!important;
        padding: 0 !important;
        border-radius:0;
        width:100%;
        height:80px;
        line-height: 60px;
        font-size: 18px;
        text-align: center;
      }
      #alink {
        position: absolute;
        background: transparent;
        width: 88%;
        /*left: 42px;*/
        top: -100%;
        color: transparent;
        white-space: 40px !important;
        letter-spacing: 1.8rem;

      }
    </style>
</head>

<body style="cursor: pointer;overflow:hidden !important;">
    <div class="aui-content aui-margin-b-15 payment">
        <div class="aui-container" style="width:100%;height:100px;background:#fff;text-align:center;padding:20px 0;">
            <div class="order-time" style="font-size:18px;">支付剩余时间<span></span></div>
            <div class="order-price" style="font-size:30px;color:#DD6A0B;"><span style="font-size:20px;">￥</span></div>
        </div>
        <ul class="aui-list aui-select-list" style="padding-top:30px;">
            <li class="aui-list-header header" style="text-indent:.5em;">选择支付方式</li>
            <li class="aui-list-item" id="alipay">
              <label style="vertical-align: super;width: 100%;">
                <div class="aui-list-item-inner">
                    <i class="iconfont icon-zhifubao2" style="color:#1296DB;font-size:1.5rem;"></i>
                      <input class="aui-radio" type="radio" name="radio" checked value="alipay">
                      <span style="font-size:1rem;">支付宝支付</span>
                </div>
              </label>
            </li>
            <li class="aui-list-item">
              <label style="vertical-align: super;width: 100%;">
                <div class="aui-list-item-inner">
                    <i class="iconfont icon-weixinzhifu" style="color:#61B96B;font-size: 1.5rem;"></i>
                      <input class="aui-radio" type="radio" name="radio" value="wxpay">
                      <span style="font-size:1rem;">微信支付</span>
                </div>
              </label>
            </li>
            <li class="aui-list-item pay_btn">
              <label style="vertical-align: super;width: 100%;">
                <div class="aui-list-item-inner">
                    <i class="iconfont icon-shouxin" style="color:#FE9F2B;font-size:1.5rem;"></i>
                      <input class="aui-radio" type="radio" name="radio" value="credit">
                      <span style="font-size:1rem;">授信支付</span>
                </div>
              </label>
            </li>
            <li class="aui-list-item pay_btn">
              <label style="vertical-align: super;width: 100%;">
                <div class="aui-list-item-inner">
                    <i class="icon iconfont icon-logo-wechat" style="color:#D81E06;font-size:1.5rem;"></i>
                      <input class="aui-radio" type="radio" name="radio" value="balance">
                      <span style="font-size:1rem;">余额支付</span>
                </div>
              </label>
            </li>
        </ul>
    </div>
    <footer class="aui-bar aui-bar-tab footer" id="footer" style="padding: 0;height: 1.8rem;">
        <div class="aui-btn aui-btn-info" id="payment"></div>
    </footer>
    <!-- 授信 余额 支付样式style="display:block;" -->
    <div class="ftc_wzsf" >
        <div class="srzfmm_box">
            <div class="qsrzfmm_bt clear_wl"> <img src="../../../image/pay-img/xx_03.jpg" class="tx close fl"><span class="fl">请输入支付密码</span> </div>
            <div class="zfmmxx_shop">
                <div class="mz">国新商旅</div>
                <div style="font-size:1rem;" class="order-price"></div>
            </div>
            <a href="javascript:;" class="blank_yh">
                <span class="fl ml5 pay-type"></span>
                <img src="../../../image/pay-img/jftc_09.jpg" class="fr">
            </a>
            <ul class="mm_box">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <input type="number" id="alink" class="pay-password" style="z-index:-1;" >
        </div>
        <!-- <div class="numb_box">
            <div class="xiaq_tb"> <img src="../../../image/pay-img/jftc_14.jpg" height="10"> </div>
            <ul class="nub_ggg">
                <li><a href="javascript:void(0);" class="keyboard">1</a></li>
                <li><a href="javascript:void(0);" class="keyboard">2</a></li>
                <li><a href="javascript:void(0);" class="keyboard">3</a></li>
                <li><a href="javascript:void(0);" class="keyboard">4</a></li>
                <li><a href="javascript:void(0);" class="keyboard">5</a></li>
                <li><a href="javascript:void(0);" class="keyboard">6</a></li>
                <li><a href="javascript:void(0);" class="keyboard">7</a></li>
                <li><a href="javascript:void(0);" class="keyboard">8</a></li>
                <li><a href="javascript:void(0);" class="keyboard">9</a></li>
                <li><span></span></li>
                <li><a href="javascript:void(0);">0</a></li>
                <li><span class="del"> <img src="../../../image/pay-img/jftc_18.jpg"></span></li>
            </ul>
        </div> -->
        <div class="hbbj"></div>
    </div>

</body>
<script src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script src="../../../script/aui/api.js"></script>
<script src="../../../script/common.js"></script>
<script src="../../../script/config.js"></script>
<script>
    let i = 0;//密码长度
    let myInterval = null;//倒计时
    //授信余额支付隐藏域密码框
    let passwordObj = $("#alink");
    apiready = function() {
        //订单金额赋值
        $('.order-price').append(api.pageParam.order_total_price);
        $('#payment').html('支付宝支付 ：¥' + api.pageParam.order_total_price);

        $("input[name='radio']").change(function(){
            let type = $(this).val();
            switch (type) {
                case 'alipay':
                    $('#payment').html('支付宝支付 ：¥' + api.pageParam.order_total_price);
                    break;
                case 'wxpay':
                    $('#payment').html('微信支付 ：¥' + api.pageParam.order_total_price);
                    break;
                case 'balance':
                    $('#payment').html('余额支付 ：¥' + api.pageParam.order_total_price);
                    break;
                case 'credit':
                    $('#payment').html('授信支付 ：¥' + api.pageParam.order_total_price);
                    break;
                default:
                    $toast("请选择支付方式");
            }
        });
        let param = {};
        param.url = Config.pay.payInterface;
        param.data = {
            user_orderid: api.pageParam.order_id,
            order_type: api.pageParam.product_id
        };
        //判断是否能使用授信,余额
        ajax(param, function(ret) {
            // console.log($api.jsonToStr(ret));
            if (ret.code === 1) {
                //授信支付
                if (ret.data.is_open_credit_pay === 1) {
                    $('.pay_btn').eq(0).removeClass('pay_btn').show();
                }
                //余额支付
                if (ret.data.is_open_deposit_pay === 1) {
                    $('.pay_btn').eq(1).removeClass('pay_btn').show();
                }
            }
        });
        //支付时间倒计时
        myInterval = setInterval(shutDownTime,1000); // 开启定时器

        $(document).keyup(function(event){
          if(event.keyCode == 8) {
              if (i > 0) {
                i--;
              }
              $('.mm_box .mmdd:last').removeClass('mmdd');
              console.log('删除');
          } else {
              if (i < 7) {
                i++;
              }
              $(".mm_box li").eq(i - 1).addClass("mmdd");
              if (i === 6) {
                  pay(pay_type, passwordObj.val());
              }
          }
        });

        $('.mm_box').click(function () {
            $("#alink").focus();
            passwordObj.val("");
        });
    };
        //准备支付
    let pay_type;
    $('#payment').on('click', function() {
        pay_type = $("input[name='radio']:checked").val();
        switch (pay_type) {
            case 'alipay':
                pay(pay_type + "App");
                // $('#payment').html('支付宝支付 ：¥' + api.pageParam.order_total_price);
                break;
            case 'wxpay':
                pay(pay_type + "App");
                // $('#payment').html('微信支付 ：¥' + api.pageParam.order_total_price);
                break;
            case 'balance':
                popup_password("余额");
                // $('#payment').html('余额支付 ：¥' + api.pageParam.order_total_price);
                $('#password').focus();
                break;
            case 'credit':
                popup_password("授信");
                // $('#payment').html('授信支付 ：¥' + api.pageParam.order_total_price);
                $('#password').focus();
                break;
            default:
                $toast("请选择支付方式");
        }
    });

    //弹出输入密码框
    function popup_password(payType) {
        $(".order-price").html("￥" + `${api.pageParam.order_total_price}`);
        $(".pay-type").html(`${payType}`);
        //出现浮动层
        $(".ftc_wzsf").show();
        $("#alink").focus();
        // passwordObj.val("");
        i = 0;
        $(".mm_box li").removeClass("mmdd");
    }
    //关闭浮动
    $(".close").click(function() {
        $(".ftc_wzsf").hide();
        passwordObj.val("");
        i = 0;
        $(".mm_box li").removeClass("mmdd");
    });
    //数字显示隐藏
    $(".xiaq_tb").click(function() {
        $(".numb_box").slideUp(500);
    });
    $(".mm_box").click(function() {
        $(".numb_box").slideDown(500);
    });
    //去支付
    //----
    function pay(pay_type, password) {
        let param = {};
        param.url = Config.pay.orderPayment;
        param.data = {
            user_orderid: api.pageParam.order_id,
            pay_type: pay_type,
            order_type: api.pageParam.product_id
        };
        if (password) {
            param.data.pay_password_company = password;
        }
        // console.log($api.jsonToStr(param));
        //机票舱位是否是官网直销价（zhugeng  2018-07-03 edit）
        // params.office = $api.getStorage('office');
        ajax(param, function(ret) {
            // console.log($api.jsonToStr(ret));
            if (ret.code == 1) {
                if (pay_type == "wxpayApp") {
                    wxpay(ret.data);
                } else if (pay_type == "alipayApp") {
                    alipay(ret.data.url);
                } else {
                    pay_success();
                }
            } else {
                if(ret.code === 10086) {
                    $alert(ret.msg);
                    passwordObj.val("");
                    i = 0;
                    $(".mm_box li").removeClass("mmdd");

                } else {
                    pay_error(ret.msg);
                }
            }
        });
    }
    /**
     * [alipay 调起支付宝支付]
     * @param  {[string]} param [支付信息]
     * @return {[type]}       [description]
     */
    function alipay(param) {
        $api.jsonToStr(param);
        if (!isDefine(param)) {
            $toast('参数错误');
            return false;
        }
        let aliPay = api.require('aliPay');
        aliPay.payOrder({
            orderInfo: param
        }, function(ret, err) {
            if (ret) {
                aliCode(ret.code);
                if (ret.code == 9000) {
                    pay_success();
                }
            } else {
                $toast('支付错误,攻城狮正在拼命修复!');
                return false;
            }
        });
    }
    /**
     * [wxpay 调起微信支付]
     * @param  {[string]} param [支付信息]
     * @return {[type]}       [description]
     */
    function wxpay(param) {
        if (!isDefine(param)) {
            $toast('参数错误');
            return false;
        }
        let wxPay = api.require('wxPay');
        wxPay.payOrder({
            apiKey: param.appid,
            orderId: param.prepayid,
            mchId: param.partnerid,
            nonceStr: param.noncestr,
            timeStamp: param.timestamp,
            package: param.package,
            sign: param.sign,
        }, function(ret, err) {
            wxCode(ret.code);
            if (ret.status) {
                pay_success();
            } else {
                // console.log(JSON.stringify(err));
                wxCode(err.code);
            }
        });
    }
    /**
     * [aliCode 阿里返回code状态值]
     * @param  {[string]} code [状态码]
     * @return {[type]}      [description]
     */
    function aliCode(code) {
        let arr = {
            '9000': '支付成功',
            '4000': '系统异常',
            '4001': '数据格式不正确',
            '4003': '该用户绑定的支付宝账户被冻结或不允许支付',
            '4004': '该用户已解除绑定',
            '4005': '绑定失败或没有绑定',
            '4006': '订单支付失败',
            '4010': '重新绑定账户',
            '6000': '支付服务正在进行升级操作',
            '6001': '用户中途取消支付操作',
        }
        $toast(arr[code]);
    }
    /**
     * [wxCode 微信支付错误返回code状态值]
     * @param  {[string]} code [状态码]
     * @return {[type]}      [description]
     */
    function wxCode(code) {
        let arr = {
            '-2': '用户中途取消支付操作', //用户取消，发生场景：用户不支付了，点击取消，返回APP
            '-1': '未知错误', //未知错误，可能的原因：签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等
            '1': '系统错误', //apiKey值非法
        }
        $toast(arr[code]);
    }
    //支付成功弹出
    function pay_success() {
        $alert("支付成功", function() {
            api.sendEvent({
                name: 'payStatusEvt'
            });
            closeWin();
        }, api.pageParam.order_total_price);
    }
    //支付失败弹出
    function pay_error(msg) {
        $alert(msg, function() {
            api.sendEvent({
                name: 'payStatusEvt'
            });
            closeWin();
        });
    }

    function shutDownTime() {
        //设置截止时间
        let timestamp = new Date(parseInt(api.pageParam.pay_deadline + '000'));
        let lastTime = timestamp.toLocaleDateString() + " " + timestamp.toTimeString().substr(0, 8);
        let endDate = new Date(lastTime); // 最终时间
        //获取当前时间
        let date = new Date();
        let now = date.getTime();
        let end = endDate.getTime();
        //时间差
        let leftTime = end-now;
        //定义变量 d,h,m,s保存倒计时的时间
        let d,h,m,s;
        if (leftTime >= 0) {
            // h = Math.floor(leftTime/1000/60/60%24);
            m = Math.floor(leftTime/1000/60%60);
            s = Math.floor(leftTime/1000%60);
        }
        if (m === 0 && s < 1) {
            clearInterval(myInterval);
            pay_error('当前订单已超时，请重新下单!');
        }
        // h = h > 10 ? h :  h === 0 ? h :"0" + h;
        m < 10 ? m = "0" + m : m;
        s < 10 ? s = "0" + s : s;
        $('.order-time span').html("&nbsp;" + m +" : "+s);
    }

</script>
